<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路线规划</title>

    <link rel="stylesheet" type="text/css" href="../../resources/gourmetHotel/css/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="../../resources/gourmetHotel/css/css/default.css">
    <link rel="stylesheet" href="../../resources/gourmetHotel/css/css/main.css"/>
</head>
<style>
    .info-title{
        color: white;
        font-size: 14px;
        background-color: blue;
        line-height: 26px;
        padding: 0px 0 0 6px;
        font-weight: lighter;
        letter-spacing: 1px
    }
    .info-content{
        padding: 4px;
        color: #666666;
        line-height: 23px;
        font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
    }
    .info-content img{
        float: left;
        margin: 3px;
    }
</style>
<link rel="stylesheet" href="../../resources/lib/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="../../resources/route/css/rout.css">
<script type="text/javascript" src="../../resources/lib/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<link rel="stylesheet" href="../../resources/index/css/style1.css"/>
<script style="text/javascript" src="../../resources/lib/jQuery/jquery-3.1.1.js"></script>
<script type="text/javascript" src="../../resources/index/js/index.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=dcbb0edca7ab72208b9959d5a4528468&&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<body>
<div class="" style="background:#fff6f4;!important;z-index: 100;margin-top: -50px;">
    <div class="col-md-2" style="background: #fff6f4">
        <img style="height:68px;width: 100%" src="../../resources/index/img/logo.png" alt=""/>
    </div>
    <!-- 代码 开始 -->
    <div id="menu2" class="menu col-md-7">
        <ul>
            <li><a  href="../index/index.html">首 页</a ></li>
            <li><a href="../scenicSpotIntroduction/scenicSpotIntroduction.html">特色景点</a></li>
            <li><a href="../gourmetHotel/gourmetHotel.html">住宿餐饮</a></li>
            <li><a href="../tourRoute/tourRoute.html">旅游导览</a></li>
            <li><a href="../backstory/backstory.html">背景故事</a></li>
            <li><a href="../aboutUs/aboutUs.html">关于我们</a></li>
            <li><a href="../travel-note/travel-note.html">游记</a></li>
        </ul>
        <div class="cls"></div>
    </div>
    <!-- 代码 结束 -->


    <div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">
        <div id="weather" onmouseover="weatherView()" onmouseout="weatherViewRemove()" style="z-index: 100;position: absolute">

            地点：<span id="currentCity"></span>
            当前日期：<span id="date"></span><br/>
            天气：
            <span id="today_weather" class="weahter"></span>
            <img id="today_day" src=""/>
            <img id="today_night" src=""/>
            <div class="nextDay">
                明天：
                <span id="tomorrow_date"></span><br/>
                <img id="tomorrow_day" src=""/>
                <img id="tomorrow_night" src=""/>
                <span id="tomorrow_weather" class="weahter"></span>
                <span id="tomorrow_temperature" class="weahter"></span>
            </div>
            <div class="nextDay">
                后天：
                <span id="tomorrowAfter_date"></span><br/>
                <img id="tomorrowAfter_day" src=""/>
                <img id="tomorrowAfter_night" src=""/>
                <span id="tomorrowAfter_weather" class="weahter"></span>
                <span id="tomorrowAfter_temperature" class="weahter"></span>
            </div>
        </div>
    </div>
</div>
<div class="col-md-6" id="container" style="position: relative;width: 50%;height:510px">
    <div id="tip" style="z-index: 100">鼠标点击地点规划路线</div>
</div>
<div class="col-md-6">
    <div class="col-md-12" style="text-align: left;z-index: 100;opacity: 0.5">
        <h3>当地导游介绍</h3>
    </div>
    <div class="bs-example">

        <div class="row">
            <div class="col-sm-6">
                <!-- normal -->
                <div class="ih-item circle effect6 scale_down"><a href="#">
                    <div class="img"><img src="../../resources/route/img/guide1.jpg" alt="img"></div>
                    <div class="info">
                        <h3>个人简介</h3>
                        <p>韩策：十三年经验 金牌导游 美食专家 幽默热情</p>
                        <p>TEL：13547582927</p>
                    </div>
                </a></div>
                <!-- end normal -->
            </div>
            <div class="col-sm-6">
                <!-- colored -->
                <div class="ih-item circle colored effect6 scale_down"><a href="#">
                    <div class="img"><img src="../../resources/route/img/guide2.jpg" alt="img"></div>
                    <div class="info">
                        <h3>个人简介</h3>
                        <p>唐晨：十一年经验 金牌导游 知识面广 温文儒雅</p>
                        <p>TEL：18181194768</p>
                    </div>
                </a></div>
                <!-- end colored-->
            </div>
        </div>
        <!-- end Scale down-->
        <!-- Scale down up-->
        <div class="row">
            <div class="col-sm-6">
                <!-- normal -->
                <div class="ih-item circle effect6 scale_down_up"><a href="#">
                    <div class="img"><img src="../../resources/route/img/guide3.jpg" alt="img"></div>
                    <div class="info">
                        <h3>个人简介</h3>
                        <p>何莹：5年经验 金牌导游 养生达人 热情活泼</p>
                        <p>TEL：17765783029</p>
                    </div>
                </a></div>
                <!-- end normal -->
            </div>
            <div class="col-sm-6">
                <!-- colored -->
                <div class="ih-item circle colored effect6 scale_down_up"><a href="#">
                    <div class="img"><img src="../../resources/route/img/guide4.jpg" alt="img"></div>
                    <div class="info">
                        <h3>个人简介</h3>
                        <p>张汉林：7年经验 金牌导游 摄影达人 美食专家</p>
                        <p>TEL：15978563479</p>
                    </div>
                </a></div>
                <!-- end colored-->
            </div>
        </div>
        <!-- end Scale down up-->
    </div>
</div>
<img class="col-md-12" style="margin-top: 20px" src="../../resources/route/img/peachblossomMap.jpg"/>
<div class="col-md-12" style="background: url('../../resources/index/img/bg2.jpg');margin-top: 20px">
    <div class="col-md-12 h1-bg">
        <h1>交通概况</h1>
    </div>
</div>
<div class="col-md-12">

    <div class="col-md-8 col-md-offset-2 traffic">
        <h1>the railway </h1>
        <span>
            &nbsp;
            &nbsp;
            &nbsp;
            &nbsp;
            川藏铁路起于成都南站（而由西站经温江区的是市域铁路），
            经成都市双流区—眉山市彭山区—蒲江县—雅安市—泸定—康定—雅江县—理塘县—（拐向）
            白玉县—江达县—昌都市—（拐向）八宿县邦达镇—八宿—波密—林芝市—米林县—朗县—山南市—贡嘎，
            抵达西藏首府拉萨，全长1629千米，建成后从成都、重庆、西安等地开行至拉萨的动车组列车仅需13个小时。
        </span>
    </div>
    <div class="col-md-8 col-md-offset-2 traffic">
        <h1>公路 </h1>
        <span>
            &nbsp;
            &nbsp;
            &nbsp;
            &nbsp;
            它在四川省-西藏的一部分属于川藏公路南线的一部分，是这条景观大道中最美、
            最精彩的一段。它的沿途风景千变万化，多姿多彩，行走其中，可以体验“隔山不
            同天，一天有四季”的奇妙感觉。它又被公认为是中国路况最险峻、通行难度最大的公路，它所穿越的
            青藏高原东部横断山脉地区是世界上地形最复杂和最独特的高山峡谷地区，被称为“心灵在天堂，身体在地狱”。
        </span>
    </div>
</div>
<div class="col-md-12" style="background: url('../../resources/index/img/bg3.jpg');margin-top: 20px">
    <div class="col-md-12 h1-bg">
        <h1>自驾路线推荐</h1>
    </div>
</div>
<div class="col-md-8 col-md-offset-2">
    <div class="bs-example">
        <div class="row">
            <div class="col-md-6">
                <!-- normal -->
                <div class="ih-item square effect7"><a href="#">
                    <div class="img"><img src="../../resources/route/img/route1.jpg" alt="img"></div>
                    <div class="info">
                        <h3>成都--汶川--理县--马尔康</h3>
                        <p>上都汶高速，沿途领略阿坝川西风光，沿岷江支流杂谷脑河谷一路向上，感受藏羌风情,经理县、古尔沟、远观羌寨、碉楼、西索民居。</p>
                    </div>
                </a></div>
                <!-- end normal -->
            </div>
            <div class="col-md-6">
                <!-- colored -->
                <div class="ih-item square colored effect7"><a href="#">
                    <div class="img"><img src="../../resources/route/img/route2.jpg" alt="img"></div>
                    <div class="info">
                        <h3>马尔康--金川赏梨花</h3>
                        <p>金川的雪梨树不仅高大，而且漫布于秀美的藏寨，依偎在美丽的河谷之间。有人说，金川梨花有几万亩，其实没有人能说出准确地面积，因为，金川的雪梨太多了......</p>
                    </div>
                </a></div>
                <!-- end colored -->
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <!-- normal -->
                <div class="ih-item square effect7"><a href="#">
                    <div class="img"><img src="../../resources/route/img/route3.jpg" alt="img"></div>
                    <div class="info">
                        <h3>金川--丹巴</h3>
                        <p>丹巴素有"千碉之国"的美称，全县现存古碉数量种类之多、建筑之奇，堪称全国之最，世界罕见。丹巴的美丽在丹巴美人谷的身上更加被世人所知！</p>
                    </div>
                </a></div>
                <!-- end normal -->
            </div>
            <div class="col-md-6">
                <!-- colored -->
                <div class="ih-item square colored effect7"><a href="#">
                    <div class="img"><img src="../../resources/route/img/route4.jpg" alt="img"></div>
                    <div class="info">
                        <h3>丹巴--八美--塔公寺--塔公草原--新都桥</h3>
                        <p>藏寨从大金河谷层层向上攀缘，一直伸延到卡帕玛群峰脚下，整个山寨依着起伏的山势迤逦连绵，在相对高差近千米的山坡上，一幢幢藏式楼房洒落在绿树丛中。</p>
                    </div>
                </a></div>
                <!-- end colored -->
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <!-- normal -->
                <div class="ih-item square effect7"><a href="#">
                    <div class="img"><img src="../../resources/route/img/route5.jpg" alt="img"></div>
                    <div class="info">
                        <h3>新都桥--理塘--巴塘</h3>
                        <p>早起，尽赏晨曦中景色如画的小桥、流水、人家、藏式民居风光。早餐后，从新都桥出发，途中将经过雅江，驶入奔腾如万马的雅砻江峡谷和茂密的森林。</p>
                    </div>
                </a></div>
                <!-- end normal -->
            </div>
            <div class="col-md-6">
                <!-- colored -->
                <div class="ih-item square colored effect7"><a href="#">
                    <div class="img"><img src="../../resources/route/img/route6.jpg" alt="img"></div>
                    <div class="info">
                        <h3>金沙江，东达山、怒江山，九十九道拐</h3>
                        <p>离开巴塘，便进入峡谷，跨过金沙江，便正式进入了西藏自治区。芒康县城，就是进入西藏后的第一个县城，海拔为3780米，川藏南线和滇藏线便在芒康会合。</p>
                    </div>
                </a>
                </div>
                <!-- end colored -->
            </div>
        </div>
    </div>
</div>
<div class="col-md-12" style="text-align: center;height: 80px;font-size: 18px;background: pink">
    <div style="margin-top: 30px">
        <span>&copy;四川旅游学院信息与工程学院2017-2018&nbsp;|&nbsp; 地址：四川省成都市龙泉驿区红岭路459号&nbsp; | &nbsp;邮编：610100 </span>

    </div>

</div>

<!--地图导航-->
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [94.370372,29.654973],
        zoom: 13,
        isHotspot: true
    });
    var placeSearch = new AMap.PlaceSearch();  //构造地点查询类
    var infoWindow=new AMap.AdvancedInfoWindow({});
    map.on('hotspotclick', function(result) {
        placeSearch.getDetails(result.id, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                placeSearch_CallBack(result);
            }
        });
    });
    //回调函数
    function placeSearch_CallBack(data) { //infoWindow.open(map, result.lnglat);
        var poiArr = data.poiList.pois;
        var location = poiArr[0].location;
        infoWindow.setContent(createContent(poiArr[0]));
        infoWindow.open(map,location);
    }
    function createContent(poi) {  //信息窗体内容
        var s = [];
        s.push('<div class="info-title">'+poi.name+'</div><div class="info-content">'+"地址：" + poi.address);
        s.push("电话：" + poi.tel);
        s.push("类型：" + poi.type);
        s.push('<div>');
        return s.join("<br>");
    }
</script>
</body>
</html>